<template>
	<view>
		<navbar title="放款表单" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__box">
					<view class="con__box__title">
						<image src="/static/daikuan/dkicon.png" class="con__box__title__icon" mode=""></image>
						借款金额
					</view>
					<view class="con__box__money">
						￥
						<!-- <input type="number" class="con__box__money__inp" v-model="money" /> -->
						<view class="con__box__money__inp">
							{{info.loan_amount}}
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label" style="color: #010101;">
							利率
						</view>
						<input type="number" class="con__box__item__inp" v-model="form.rate" @blur="computMoney"
							placeholder="请输入利率" />
					</view>
					<view class="con__box__item">
						<view class="con__box__item__line">

						</view>
						<view class="con__box__item__label" style="color:#1E1E1E;">
							基本信息
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							姓名
						</view>
						<view class="con__box__item__inp">
							{{info.username}}
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							电话
						</view>
						<view class="con__box__item__inp">
							{{info.mobile}}
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							销售
						</view>
						<view class="con__box__item__inp">
							{{info.saleName}}
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							借款日期
						</view>
						<view class="con__box__item__inp u-flex u-flex-end u-flex-y-center"
							@click="show=true,curtimetype=1">
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.loan_date">
									选择日期
								</view>
								<view class="con__box__item__inp__time" v-else>
									{{$u.timeFormat(new Date(this.form.loan_date).getTime(), 'yyyy-mm-dd')}}
								</view>
							</view>
							<view class=""
								style="width: 2rpx;height: 22rpx;background: #888888;opacity: 0.5;margin: 0 14rpx;">

							</view>
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.loan_date">
									选择时间
								</view>
								<view class="con__box__item__inp__time" v-else>
									{{$u.timeFormat(new Date(this.form.loan_date).getTime(), 'hh:MM')}}
								</view>
							</view>
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							到期日期
						</view>
						<view class="con__box__item__inp u-flex u-flex-end u-flex-y-center" @click="clickend()">
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.end_date">
									选择日期
								</view>
								<view class="con__box__item__inp__time" v-else>
									{{$u.timeFormat(new Date(this.form.end_date).getTime(), 'yyyy-mm-dd')}}
								</view>
							</view>
							<view class=""
								style="width: 2rpx;height: 22rpx;background: #888888;opacity: 0.5;margin: 0 14rpx;">

							</view>
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.end_date">
									选择时间
								</view>
								<view class="con__box__item__inp__time" v-else>
									{{$u.timeFormat(new Date(this.form.end_date).getTime(), 'hh:MM')}}
								</view>
							</view>
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							抵押方式
						</view>
						<view class="con__box__item__inp">
							<view class="con__box__item__inp__r" v-for="(item,index) in radiolist1" :key="index"
								@click="radiovalue1=item.name">
								<view class="con__box__item__inp__r__b">
									<image src="/static/daikuan/check.png" v-if="item.name==radiovalue1"
										class="con__box__item__inp__r__b__c" mode="">
									</image>
									<view class="con__box__item__inp__r__b__n" v-else>

									</view>
								</view>
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							还款方式
						</view>
						<view class="con__box__item__inp">
							<view class="con__box__item__inp__r" v-for="(item,index) in radiolist2" :key="index"
								@click="radiovalue2=item.name,radioChange(item)">
								<view class="con__box__item__inp__r__b">
									<image src="/static/daikuan/check.png" v-if="item.name==radiovalue2"
										class="con__box__item__inp__r__b__c" mode="">
									</image>
									<view class="con__box__item__inp__r__b__n" v-else>

									</view>
								</view>
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							还款日
						</view>
						<view class="con__box__item__inp u-flex u-flex-end u-flex-y-center" @click="show1=true">
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.day">
									选择日期
								</view>
								<view class="con__box__item__inp__time" v-else>
									每月{{form.day}}号
								</view>
							</view>
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							月还款额
						</view>
						<view class="con__box__item__inp u-flex u-flex-end u-flex-y-center">
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.month_amount">
									还款额
								</view>
								<view class="con__box__item__inp__time">
									{{form.month_amount}}
								</view>
							</view>
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							抵押物信息
						</view>
						<input type="text" class="con__box__item__inp" v-model="form.diyawu" placeholder="请输入抵押物信息" />

					</view>
					<view class="con__box__ti">
						<view class="con__box__ti__line">

						</view>
						备注
					</view>
					<view class="" style="border-bottom: 2rpx solid #F9F9F9;">
						<u--textarea :showConfirmBar='false' v-model="form.remark" placeholder="请输入备注信息" height='140rpx'
							count maxlength='1000' border='none'></u--textarea>
					</view>
					<u-button color="#3262FD" text='提交' :loading="loading" @click='submit'
						:customStyle='{width:"628rpx",height:"94rpx",margin:"99rpx 0 0 0",padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'></u-button>
				</view>
			</view>
		</scroll-view>
		<u-datetime-picker :show="show" v-model="value1" :minDate='minDate' mode="datetime" @cancel="show=false"
			@confirm="confirm"></u-datetime-picker>
		<u-picker :show="show1" :defaultIndex='defaultIndex' :columns="columns" @cancel="show1=false"
			@confirm="confirm1"></u-picker>
		<u-picker :show="show2" keyName='name' :defaultIndex='defaultIndex1' :columns="columns1" @cancel="show2=false"
			@confirm="confirm2"></u-picker>
	</view>
</template>

<script>
	import boos from '@/api/_boos.js'
	export default {
		data() {
			return {
				loading:false,
				show: false,
				show1: false,
				show2: false,
				columns: [
					[1, 5, 15, 25]
				],
				defaultIndex: [0],
				defaultIndex1: [0],
				columns1: [
					[{
						name: '1个月',
						value: 1
					}, {
						name: '3个月',
						value: 3
					}, {
						name: '6个月',
						value: 6
					}, {
						name: '12个月',
						value: 12
					}, {
						name: '24个月',
						value: 24
					}, {
						name: '36个月',
						value: 36
					}, {
						name: '48个月',
						value: 48
					}, {
						name: '60个月',
						value: 60
					}]
				],
				value1: Number(new Date()),
				minDate: Number(new Date()),
				curtimetype: 1,
				radiolist1: [{
						name: '一抵',
					},
					{
						name: '二抵',
					}, {
						name: '三抵',
					}
				],
				radiolist2: [{
					name: '先息后本',
					value:1
				}, {
					name: '等额本息',
					value:2
				}],
				radiovalue1: '一抵',
				radiovalue2: '先息后本',
				id: null,
				info: {},
				form: {
					amount: '',
					// varchar(32) DEFAULT NULL COMMENT '借款金额',
					loan_id: '',
					// int(11) DEFAULT NULL COMMENT '贷款订单',
					rate: '',
					// varchar(11) DEFAULT NULL COMMENT '利率',
					name: '',
					// varchar(32) DEFAULT NULL COMMENT '姓名',
					phone: '',
					// varchar(11) DEFAULT NULL COMMENT '电话',
					sale_id: '',
					// int(11) DEFAULT NULL COMMENT '销售ID',
					user_id: '',
					// int(11) DEFAULT NULL COMMENT '客户ID',
					loan_date: '',
					// datetime DEFAULT NULL COMMENT '借款日期',
					end_date: '',
					// datetime DEFAULT NULL COMMENT '结束日期',
					diya: '',
					// varchar(32) DEFAULT NULL COMMENT '抵押方式',
					loan_method: '',
					// varchar(32) DEFAULT NULL COMMENT '还款方式',
					day: '',
					// varchar(32) DEFAULT NULL COMMENT '还款日',
					month_amount: '',
					// varchar(32) DEFAULT NULL COMMENT '月还款',
					diyawu: '',
					// varchar(255) DEFAULT NULL COMMENT '抵押物',
					remark: '',
					// varchar(255) DEFAULT NULL COMMENT '备注',

				},
				qishu: null,
				loan_method:1,
				loan_amount:0
			};
		},
		methods: {
			async computMoney() {
				if (this.form.rate&&this.qishu) {
					let res = await boos.chartMoney({
						amount: this.info.loan_amount,
						qishu: this.qishu,
						rate: (this.form.rate/100).toFixed(6),
						loan_method:this.loan_method
					})
					if(res.data.code==1){
						this.form.month_amount=res.data.data.toFixed(2)
					}
				}

			},
			async submit(){
				let _this=this
				this.form.amount=this.info.loan_amount
				this.form.name=this.info.username
				this.form.phone=this.info.mobile
				this.form.sale_id=this.info.sale_id
				this.form.user_id=this.info.user_id
				this.form.diya=this.radiovalue1
				this.form.loan_method=this.radiovalue2
				this.form.loan_id=this.id
				if (!this.paramsValidate(this.form)) {
					return
				}
				this.loading=true
				let res = await boos.createCredit(this.form)
				if(res.data.code==1){
					uni.$u.toast('放款成功')
					setTimeout(()=>{
						_this.loading=false
						uni.navigateBack()
					},1000)
				}else{
					uni.$u.toast('提交失败')
					_this.loading=false
				}
				
			},
			paramsValidate(params) {
				let flag = true;
				for (var key in params) {
					if (params[key] != '0' && !params[key]) {
						uni.$u.toast('请将信息填写完整')
						return false; // 终止程序
					}
				}
				return flag;
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				this.loan_method=n.value
				this.computMoney()
			},
			async getinfo() {
				let res = await boos.loanInfo({
					id: this.id
				})
				if (res.data.code == 1) {
					this.info = res.data.data
					if(this.loan_amount){
						this.info.loan_amount=this.loan_amount
					}
				}
			},
			clickend() {
				if (!this.form.loan_date) {
					uni.$u.toast('请先选择借款日期')
					return
				}
				this.show2 = true
			},
			confirm(e) {
				this.form.loan_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				this.show = false
			},
			confirm1(e) {
				this.form.day = e.value[0]
				this.defaultIndex = e.indexs
				this.show1 = false
			},
			confirm2(e) {
				// console.log(e)
				this.qishu = e.value[0].value
				this.form.end_date=this.addMonth(this.form.loan_date,this.qishu)
				this.defaultIndex1 = e.indexs
				this.computMoney()
				this.show2=false
			},
			addMonth(date, num) {  
			  if (!date || !num) return;             
			  var num1 = parseInt(num);
			  var d = new Date(date); 
			  var time=uni.$u.timeFormat(d, 'hh:MM')
			  var thisMonth = d.getMonth() + 1;
			  var thisYear = d.getFullYear();
			  var thisDay = d.getDate();
			  var dateStr = "";
			  var addCount = thisMonth + num1;
			  var diffMonthCount = parseInt(addCount / 12); //取整
			  
			  if ((thisMonth + num1) === 12 * diffMonthCount) { //如果是本年
			    if ((thisMonth + num1) === 12) {
			      diffMonthCount = 0;
			    } else {
			      diffMonthCount = diffMonthCount - 1;
			    }
			  }
			  if (thisMonth + num1 > 12) { //如果是大于一年
			    thisYear += diffMonthCount;
			  }
			  thisMonth = (addCount) - 12 * diffMonthCount;
			  if (thisMonth < 10) {
			    thisMonth = "0" + thisMonth;
			  }
			  
			  var thatDate = new Date(thisYear, thisMonth, 0); //当天数为0 js自动处理为上一月的最后一天
			  var thatDay = thatDate.getDate();//指定年月的当月最大天数
			  let m1 = date.substring(5, 7); 
			  if (thisDay === 30 || thisDay === 31 || (m1 === "02" && thisDay >= 28)) {
			    thisDay = thatDay;
			    if (date) {
			      let m2 = date.substring(5, 10); 
			      //  成立日为2月份，且期限为整年的判断闰年
			      if (m2 === "02-28" && num % 12 === 0) {
			        if (!(thisYear % (thisYear % 100 ? 4 : 400))) {
			          thisDay = "29";
			        }
			      }
			    }
			    dateStr = thisYear + "-" + thisMonth + "-" + thisDay; 
			  } else {
			    dateStr = this.addMonth2(date, num);
			  }
			  return dateStr+' '+time;
			},
			addMonth2(date, num) {
			  var monthnum = 0;
			  if (typeof (num) === "string") { monthnum = parseInt(num); } else { monthnum = num; }
			  if (typeof (date) === "string") { date = new Date(date); }
			  var year = date.getFullYear();
			  var month = date.getMonth() + 1;
			  var day = date.getDate();
			  var sumMonths = month + monthnum;
			  var newyear = year + parseInt(sumMonths / 12);
			  var newmonth = sumMonths % 12;
			  var newday = day;
			  let newmonth2 = "";
			  if (newmonth < 1) {
			    if (newmonth === 0) newyear--;
			    newmonth2 = 0 - (sumMonths - 1) % 12; 
			  } 
			  var da = new Date(newyear, newmonth2, 0);
			  newmonth = newmonth === 0 ? "12" : newmonth;
			    var _day = da.getDate() < newday ? da.getDate() : newday;
			  _day = _day < 10 && String(_day).length === 1 ? "0" + _day : _day;
			  newmonth = newmonth < 10 && String(newmonth).length === 1 ? "0" + newmonth : newmonth;
			  return newyear + "-" + newmonth + "-" + _day;
			}
		},
		onLoad(o) {
			this.id = o.id
			this.loan_amount=o.loan_amount
			this.getinfo()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 20rpx 30rpx 50rpx;

		&__box {
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 33rpx 0 46rpx 30rpx;

			&__title {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #1E1E1E;
				line-height: 30rpx;

				&__icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 14rpx;
				}
			}

			&__ti {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #1E1E1E;
				line-height: 26rpx;
				display: flex;
				align-items: center;
				padding: 35rpx 0 30rpx;
				padding-left: 10rpx;

				&__line {
					width: 6rpx;
					height: 24rpx;
					background: #3262FD;
					margin-right: 10rpx;
				}
			}

			&__money {
				display: flex;
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #010101;
				line-height: 40rpx;
				align-items: center;
				margin: 30rpx 0 0;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F9F9F9;

				// margin-top: 10rpx;
				&__inp {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 53rpx;
					color: #000000;
					line-height: 40rpx;
					margin-left: 6rpx;
				}
			}

			&__item {
				height: 106rpx;
				padding: 0 30rpx 0 0;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				border-bottom: 2rpx solid #F9F9F9;

				&__line {
					width: 5rpx;
					height: 24rpx;
					background: #3262FD;
					margin-right: 10rpx;
				}

				&__label {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #6D6D6D;
					line-height: 26rpx;
				}

				&__inp {
					flex: 1;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #020202;
					line-height: 38rpx;
					text-align: right;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.uni-input-placeholder {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #6D6D6D;
						line-height: 38rpx;
					}

					&__timelabel {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #6D6D6D;
						line-height: 38rpx;
					}

					&__r {
						display: flex;
						align-items: center;
						margin-left: 50rpx;

						&__b {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 9rpx;

							&__c {
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
							}

							&__n {
								width: 24rpx;
								height: 24rpx;
								border-radius: 50%;
								border: 2rpx solid #6D6D6D;
								opacity: 0.5;
							}
						}
					}
				}
			}
		}
	}

	::v-deep.u-textarea {
		padding: 32rpx 30rpx 60rpx 0;

		.u-textarea__field {
			font-size: 26rpx;
			color: #020202;
		}

		.uni-textarea-placeholder {
			color: #939393 !important;
		}
	}
</style>